
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="t" tagdir="/WEB-INF/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
		String username = (String) session.getAttribute("username");
		com.group4.DAO.UserDAO user = com.group4.DB.User.getUserWithUsername(username);
		java.util.List<com.group4.DAO.ChannelDAO> channels = com.group4.DB.Channel.getChannels(user.getID());
		session.setAttribute("channels", channels);
		session.setAttribute("user", user);
%>
<t:wrapperLogin title="My Profile">
	<script>
		function checkPass() {
			//Store the password field objects into variables ...
			var pass1 = document.getElementById('pass1');
			var pass2 = document.getElementById('pass2');
			//Store the Confimation Message Object ...
			var message = document.getElementById('confirmMessage');
			//Set the colors we will be using ...
			var goodColor = "#66cc66";
			var badColor = "#ff6666";
			//Compare the values in the password field 
			//and the confirmation field
			if (pass1.value == pass2.value) {
				//The passwords match. 
				//Set the color to the good color and inform
				//the user that they have entered the correct password 
				pass2.style.backgroundColor = goodColor;
				message.style.color = goodColor;
				message.innerHTML = "Passwords Match!"
			} else {
				//The passwords do not match.
				//Set the color to the bad color and
				//notify the user.
				pass2.style.backgroundColor = badColor;
				message.style.color = badColor;
				message.innerHTML = "Passwords Do Not Match!"
			}
		}

		function submitForm(thisObj, thisEvent) {
			var channelName = $('#channel').val();
			var userName = $('#username').val();

			var jsonDataObject = new Object();
			jsonDataObject.channelName = channelName;
			jsonDataObject.userName = userName;

			// turn the jsonData object into a string so it can be passed to the servlet
			var jsonData = JSON.stringify(jsonDataObject);

			$.getJSON("/Signport/addChannel", {
				channelName : channelName,
				userName : userName
			}, function(data) {
				if (data.error != undefined) {
					alert(data.error);
				} else {
					alert("Channel successfully created!");
				}

				$('#return_message').html(data.message);
			});

			return false; // prevents the page from refreshing before JSON is read from server response
		}
		
		function submitUpdateForm(thisObj, thisEvent) {
			var email = $('#email').val();
			var userName = $('#username').val();
			var pass = $('#pass').val();
			var pass2 = $('#pass2').val();
			

			$.getJSON("/Signport/edit", {
				password : pass,
				password2 : pass2,
				username : userName,
				email : email
			}, function(data) {
				if (data.error != undefined) {
					alert(data.error);
				} else {
					alert("User successfully updated!");
				}

				$('#return_message').html(data.message);
			});

			return false; // prevents the page from refreshing before JSON is read from server response
		}
	</script>

	<div class="page-content">

		<div class="page-header">
			<h1>User Profile</h1>
		</div>

		<div class="row">
			<div class="col-xs-6">
				<div class="widget-box transparent">
					<div class="widget-header widget-header-small">
						<h4 class="smaller">User Info</h4>
					</div>
					<div class="widget-body">
						<div class="widget-main padding-8">
							<form class="form-horizontal" role="form" action="edit"
								method="POST">
								<div class="form-group">
									<label for="username">Username</label> <input type="text"
										class="form-control" name="username" id="username"
										value=${username } disabled />
								</div>
								<div class="form-group">
									<label for="password">Password</label> <input type="password" id="pass"
										class="form-control" name="password" placeholder="Password"
										required />
								</div>
								<div class="form-group">
									<label for="password">Repeat Password</label> <input
										type="password" class="form-control" name="password2"
										id="pass2" placeholder="Password" required /> <span
										id="confirmMessage" class="confirmMessage"></span>
								</div>
								<div class="form-group">
									<label for="email">Email</label> <input type="email" id="email"
										class="form-control" name="email"value=${user.email } placeholder="Email" required />
								</div>
								<div class="clearfix form-actions">
									<!-- <button type="submit" class="btn btn-info">Change</button> -->
									<input type="submit" name="submit" value="Change" class="btn btn-info"
										onclick="return submitUpdateForm(this, event);">
								</div>
								
							</form>
						</div>
					</div>
				</div>

				<div class="widget-box transparent">
					<div class="widget-header widget-header-small">
						<h4 class="smaller">Owned Channels</h4>
					</div>
					<div class="widget-body">
						<div class="widget-main padding-8">
							<c:forEach items="${channels}" var="channel">
								<div class="profile-activity clearfix">
									<a href="#">${channel.channelName}</a>
								</div>
							</c:forEach>

						</div>
					</div>
				</div>

				<div class="widget-box transparent">
					<div class="widget-header widget-header-small">
						<h4 class="smaller">Add Channel</h4>
					</div>
					<div class="widget-body">
						<div class="widget-main padding-8">
							<form class="form-horizontal" role="form">
								<div class="form-group">
									<input type="text" class="form-control" name="channel"
										id="channel" placeholder="Channel Name" required />
								</div>
								<div class="clearfix form-actions">
									<!-- <button type="submit" class="btn btn-info">Change</button> -->
									<input type="submit" name="submit" value="Add Channel" class="btn btn-info"
										onclick="return submitForm(this, event);">
								</div>
							</form>
						</div>
					</div>
				</div>

				<!-- <div class="widget-box transparent">
					<div class="widget-header widget-header-small">
						<h4 class="smaller">Subscribed Channels</h4>
					</div>
					<div class="widget-body">
						<div class="widget-main padding-8">
							<div class="profile-activity clearfix">
								<a href="#">Channel 1</a>
							</div>
							<div class="profile-activity clearfix">
								<a href="#">Channel 2</a>
							</div>
							<div class="profile-activity clearfix">
								<a href="#">Channel 3</a>
							</div>
							<div class="profile-activity clearfix">
								<a href="#">Channel 4</a>
							</div>
							<div class="profile-activity clearfix">
								<a href="#">Channel 5</a>
							</div>
						</div>
					</div>
				</div> -->

			</div>
			<div class="col-xs-6">
				<div class="widget-box transparent">
					<div class="widget-header widget-header-small">
						<h4 class="smaller">Videos</h4>
					</div>
					<div class="widget-body">
						<div class="widget-main padding-8">

							<c:if test="${not empty videos}">


								<c:forEach items="${videos}" var="video">
									<div class="profile-activity clearfix">
										<a href="videopage.jsp?v=${video.key}"><h4>${video.value}</h4></a><br />
										<object type="application/x-shockwave-flash"
											data="http://flv-player.net/medias/player_flv.swf"
											width="200" height="150">
											<param name="movie"
												value="http://flv-player.net/medias/player_flv.swf" />
											<param name="allowFullScreen" value="true" />
											<param name="FlashVars" value="flv=${video.key}" />
										</object>
									</div>
								</c:forEach>


							</c:if>

						</div>
					</div>
				</div>
			</div>
		</div>
</t:wrapperLogin>